<html>
<head>
<script language="javascript" type="text/javascript">

//Browser Support Code
	function ajaxFunction(){
		var ajaxRequest;  // The variable that makes Ajax possible!
	
		try{
			// Opera 8.0+, Firefox, Safari
			ajaxRequest = new XMLHttpRequest();
		} catch (e){
			// Internet Explorer Browsers
			try{
				ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try{
					ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e){
					// Something went wrong
					alert("Your browser broke!");
					return false;
				}
			}
		}
		// Create a function that will receive data sent from the server
		ajaxRequest.onreadystatechange = function(){
			if(ajaxRequest.readyState == 4){
				var ajaxDisplay = document.getElementById('ajaxDiv');
				ajaxDisplay.innerHTML = ajaxRequest.responseText;
			}
		}
		var user = document.getElementById('userID').value;
		var pwd = document.getElementById('password').value;
		var queryString = "?usrnm=" + user + "&pwd=" + pwd;
		ajaxRequest.open("POST", "login.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		ajaxRequest.send(queryString); 
	}
</script>




</head>
<body>

	<h1>Login</h1>

<form>

    <table id="events">
        <tr>
            <td colspan=3>Login ID </td>
            </tr>
        <tr>
            <td colspan=3><input id="userID" type="text" name="userID" /></td>
            </tr>
	<tr>
            <td colspan=3>Password </td>
            </tr>
        <tr>
            <td colspan=3><input id="password" type="text" name="password" /></td>
            </tr>
	 
    </table>
    <br />
  <div style="margin-left:550px;"> <input align="right" type="button" value="Login" onClick=ajaxFunction()> </div>
    </form>
</div>

<div id='ajaxDiv'>Your result will display here</div>

</body>
</html>
